<template>
  <div class="parking">
    <div class="select">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="区域">
          <CityArea
            ref="cityArea"
            @callback="callbackComponent"
            :cityAreaValue.sync="searchForm.area"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchForm.type"
            placeholder="停车场"
            class="width-120"
          >
            <el-option
              v-for="item in parking_type"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="禁启用">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择"
            class="width-120"
          >
            <el-option
              v-for="item in parking_status"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-select
            v-model="search_key"
            placeholder="请选择"
            class="width-120"
          >
            <el-option label="停车场名称" value="parkingName"></el-option>
            <el-option label="详细区域" value="address"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="keyword"
            placeholder="请输入关键字按Enter搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>

      <router-link to="/parkingAdd">
        <el-button type="primary" style="margin-left: 10px" plain
          >新增停车场</el-button
        >
      </router-link>
      <TodoTable
        :data="tableData"
        :columns="table_config"
        :pageSize="tablePage.pageSize"
        :pageSizes="tablePage.pageSizes"
        :total="tablePage.total"
        :currentPage="tablePage.currentPage"
        @changePage="handlePageChange"
        @handleSelect="handleSelectChange"
      >
        <template v-slot:operation="slotData">
          <el-button
            size="small"
            @click="parkingDelete(slotData.data.id)"
            :loading="slotData.data.id == rowId"
            >删除</el-button
          >
          <el-button size="small" @click="edit(slotData.data.id)"
            >编辑</el-button
          >
        </template>
        <template v-slot:type="slotData"
          ><el-tag size="small" type="primary">{{
            slotData.data.type === "1" ? "室内" : "室外"
          }}</el-tag>
        </template>
        <template v-slot:status="slotData"
          ><el-switch
            :disabled="slotData.data.id == switch_disabled"
            @change="switchChange(slotData.data)"
            v-model="slotData.data.status"
            active-color="#13ce66"
          >
          </el-switch>
        </template>
        <!--查看地图-->
        <template v-slot:lnglat="slotData">
          <el-button type="success" size="mini" @click="showMap(slotData.data)"
            >查看地图</el-button
          >
        </template>
      </TodoTable>

      <MapLocation :flagVisible.sync="map_show" :parking_data="parking_data" />
    </div>
  </div>
</template>
<script>
  // AMAP
  import AMap from "../../views/amap/amap.vue"
  import tableData from "../../components/tableData/tableData.vue"
  import MapLocation from "@c/dialog/showMapLocation"
  import CityArea from "../../components/common/cityArea/cityArea.vue"
  import TodoTable from "@c/tableData/TodoComTable.vue"
  // common
  // import { address, parkingType } from "../../"
  import { ParkingDelete, ParkingStatus, ParkingList } from "@/api/parking"
  export default {
    name: "ParkingIndex",
    components: { AMap, MapLocation, tableData, CityArea, TodoTable },
    data() {
      return {
        areaValue: [],
        tableData: [],
        areaOptions: [],
        stopOptions: [
          {
            value: 1,
            label: "禁用",
          },
          {
            value: 2,
            label: "启用",
          },
        ],
        wordOptions: [
          {
            value: 1,
            label: "停车场名称",
          },
          {
            value: 2,
            label: "详细区域",
          },
        ],
        // 筛选
        searchForm: {
          area: "",
          type: "",
          status: "",
        },
        search_key: "",
        // 关键字
        keyword: "",
        // 禁启用
        parking_status: this.$store.state.config.radio_disabled,
        // 停车场类型
        parking_type: this.$store.state.config.parking_type,
        multipleSelection: [],
        button_loading: false,
        tablePage: {
          // 当前页数量
          pageSize: 10,
          pageSizes: [10, 20, 30],
          // 当前页
          currentPage: 1,
          // 总数
          total: 1,
        },
        switch_flag: false,
        switch_disabled: "",
        // 地图显示
        map_show: false,
        // 删除加载loading
        rowId: "",
        parking_data: {},
        // 表格配置
        table_config: {
          thead: [
            {
              label: "操作",
              prop: "operation",
              type: "slot",
              slotName: "operation",
            },
            { label: "停车场名称", prop: "parkingName" },
            {
              label: "类型",
              prop: "type",
              type: "slot",
              slotName: "type",
            },
            {
              label: "区域",
              prop: "address",
            },
            { label: "可停放车辆", prop: "carsNumber" },
            {
              label: "禁启用",
              prop: "status",
              type: "slot",
              slotName: "status",
            },
            {
              label: "查看位置",
              prop: "lnglat",
              type: "slot",
              slotName: "lnglat",
            },
          ],
        },
      }
    },
    filters: {},
    methods: {
      // 初始化默认值
      initDefault(val) {
        console.log(val)
      },
      handleChange(value) {
        console.log(value)
      },
      handleSelectChange(val) {
        this.multipleSelection = val
      },
      handlePageChange(pageSize, currentPage) {
        this.tablePage.pageSize = pageSize
        this.tablePage.currentPage = currentPage
        this.getParkingList()
      },
      // 一个组件调用多个方法的方式
      callbackComponent(params) {
        // this.$refs.amap
        console.log(params, ";;;")
        if (params.function) {
          this[params.function](params.data)
        }
      },
      // 搜索  可以调用列表接口
      search() {
        this.getParkingList()
        // 调用子组件的方法
      },
      // 获取停车场列表
      async getParkingList() {
        try {
          const requestData = {
            pageSize: this.tablePage.pageSize,
            pageNumber: this.tablePage.currentPage,
          }
          // 过滤筛选
          const filterData = JSON.parse(JSON.stringify(this.searchForm))
          for (let key in filterData) {
            if (filterData[key]) {
              requestData[key] = filterData[key]
            }
          }
          // 关键字
          if (this.keyword && this.search_key) {
            requestData[this.search_key] = this.keyword
          }

          const res = await ParkingList(requestData)
          this.tablePage.total = res.data.data.total
          this.tableData = res.data.data.data
        } catch (err) {
          console.log(err)
        }
      },
      // 停车场列表删除接口
      parkingDelete(id) {
        let params = {
          id: id,
        }
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            ParkingDelete(params)
              .then((response) => {
                this.rowId = id
                this.$message({
                  type: "success",
                  message: response.data.message,
                })
                this.rowId = ""
              })
              .catch((error) => {
                this.rowId = ""
              })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            })
          })
      },
      // 禁启用功能
      switchChange(data) {
        if (this.switch_flag) {
          return false
        }
        const requestData = {
          id: data.id,
          status: data.status,
        }
        // this.switch_flag = true;
        this.switch_disabled = data.id // 第一种方式：组件本身的属性处理
        ParkingStatus(requestData)
          .then((response) => {
            this.$message({
              type: "success",
              message: response.data.message,
            })
            this.switch_disabled = ""
            // this.switch_flag = false;
          })
          .catch((error) => {
            this.switch_disabled = ""
            // this.switch_flag = false;
          })
      },
      // 查看地图功能
      showMap(data) {
        console.log(data, "map")
        this.map_show = true
        this.parking_data = data
      },
      // 编辑
      edit(data) {
        // console.log(data, "id")
        this.$router.push({
          name: "ParkingAdd",
          query: {
            id: data,
          },
        })
      },
    },
    created() {
      this.getParkingList()
    },
  }
</script>
<style lang='scss'>
  @import "./index.scss";
</style>